<template>
	<view class="content">
		<view class="list" style="margin-top: 30rpx;">
			<view class="title">
				维修人员信息填写
			</view>
			<view class="item" @click="typeShow">
				<label style="margin-right: 56rpx;">
					<image src="../../../static/icon/gongtype.png" class="icon"></image>
					工种
				</label>
				<picker @change="bindPickerChange" :value="index" :range="typeArray.array">
					<view class="type">{{typeArray.array[index]}}</view>
				</picker>
			</view>

			<view class="item">
				<label style="margin-right: 56rpx;">
					<image src="../../static/icon/name.png" class="icon"></image>
					姓名
				</label>
				<input v-model="name" placeholder="请输入姓名" />
			</view>
			<view class="item">
				<label style="margin-right: 28rpx;">
					<image src="../../static/icon/phone.png" class="icon"></image>
					手机号
				</label>
				<input v-model="phone" placeholder="请输入手机号" />
			</view>
			<view class="item">
				<label style="margin-right: 56rpx;">
					<image src="../../static/icon/password.png" class="icon"></image>
					密码
				</label>
				<input v-model="password" placeholder="请输入密码" />
			</view>


			<view class="item">
				<label style="margin-right: 56rpx;">
					<image src="../../../static/icon/sex.png" class="icon"></image>
					性别
				</label>
				<u-radio-group v-model="value1" @change="sexChange" placement="row">
					<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in sexArray" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>

			<view class="item" @click="timeShow">
				<label>
					<image src="../../../static/icon/time.png" class="icon"></image>
					入职日期
				</label>
				<input v-model="entrytime" placeholder="请选择" disabled />
				<u-calendar :show="timeshow" @close="close" @confirm="confirm"></u-calendar>
			</view>

			<view class="item" @click="selectShow">
				<label>
					<image src="../../../static/icon/status.png" class="icon"></image>
					在职状态
				</label>
				<u-radio-group v-model="value2" @change="groupChange" placement="row">
					<u-radio :customStyle="{marginRight: '8px'}" v-for="(item, index) in statusArray" :key="index"
						:label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
			</view>



			<view class="photoitem">
				<view class="photo">
					<image src="../../static/icon/photo.png" class="icon"></image>
					照片
				</view>
				<view class="uploadBox">
					<u-upload class="upload" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"
						multiple :maxCount="10"></u-upload>
				</view>
			</view>
		</view>

		<view class="box" @click="sumbit" v-if="isadd==true">
			提交
		</view>
		<view class="box" @click="edit" v-else>
			修改
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import api from '@/api/api'
	let isadd = ref(true)
	let value1 = ref('男'),
		value2 = ref('在职'),
		personId=''
	onLoad(async (options) => {
		await api.getTypeList().then(res => {
			if (res.status == 200) {
				typeArray.array = [...typeArray.array, ...res.data]
			}
		})

		if (options.personId) {
			isadd.value = false
			api.getPersonInfo({
				personId: options.personId
			}).then(res => {
				if (res.status == 200) {
					let info = res.data[0]
					personId=info.personId
					type.value = info.type
					password.value = info.password
					name.value = info.nickname
					entrytime.value = info.entrytime.substring(0,10)
					type.value = info.type
					value1.value = info.sex == 1 ? '男' : '女'
					phone.value = info.phone
					value2.value = info.status == 1 ? '在职' : '离职'
					for (let i = 0; i < typeArray.array.length; i++) {
						if (info.type == typeArray.array[i]) {
							index.value = i
						}
					}
				}
			})
		}
	})



	const sumbit = () => {
		api.personAdd({
			username: phone.value,
			password: password.value,
			nickname: name.value,
			entrytime: entrytime.value,
			type: type.value,
			sex: value1.value,
			phone: phone.value,
			status: value2.value
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: '新增成功',
					duration: 1500,
					icon: 'none'
				})

				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				},1500)
			}
		})
	}


	const edit = () => {
		api.personEdit({
			username: phone.value,
			password: password.value,
			nickname: name.value,
			entrytime: entrytime.value,
			type: type.value,
			sex: value1.value,
			phone: phone.value,
			status: value2.value,
			personId:personId
		}).then(res => {
			if (res.status == 200) {
				uni.showToast({
					title: '修改成功',
					duration: 1500,
					icon: 'none'
				})
			
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				})
			}
			
		})
	}

	let name = ref(''),
		phone = ref(''),
		password = ref('')

	const statusArray = [{
		name: '在职',
		disabled: false
	}, {
		name: '离职',
		disabled: false
	}]

	// 在职状态
	const groupChange = (n) => {
		value2.value = n
	}

	// 性别
	const sexArray = [{
		name: '男',
		disabled: false
	}, {
		name: '女',
		disabled: false
	}]

	const sexChange = (n) => {
		value1.value = n
	}

	// 工种
	let typeArray = reactive({
		array: ['请选择']
	})
	let index = ref(0)
	let type = ref('')
	const bindPickerChange = (e) => {
		index.value = e.detail.value
		type.value = typeArray.array[e.detail.value]
	}

	// 时间
	let timeshow = ref(false),
		entrytime = ref('')
	const timeShow = () => {
		timeshow.value = true
	}
	const confirm = (e) => {
		entrytime.value = e[0]
		timeshow.value = false
	}
	const colse = () => {
		timeshow.value = false
	}
</script>

<style lang="scss">
	.content {
		// margin: 30rpx;

		.bg {
			background-image: url("");
			background-size: 100% 100%;

			.uni-navbar {
				.uni-navbar__content {
					border: 0 none !important;
				}
			}
		}




		.list {
			margin: 0 30rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			margin-bottom: 30rpx;
			background-color: white;
			padding: 30rpx;
			border-radius: 16rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.item {
				label {
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}


				input {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				.type {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}

				line-height: 100rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: #E6E6E6 1rpx solid;
			}

			.photoitem {
				.photo {
					line-height: 100rpx;
					padding-right: 30rpx;
					font-size: 28rpx;
					color: #666666;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						padding-right: 5rpx;
					}
				}

				.uploadBox {}
			}

		}

		.box {
			margin: 10rpx 30rpx;
			background-color: #3B8AF4;
			color: white;
			font-size: 28rpx;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 16rpx;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
		}
	}
</style>
